var domain = "https://easy-mock.com/mock/5aa77cc22b0894377fc76653";
function recommend(){
				var xhr = new XMLHttpRequest;
				xhr.open("GET",domain+'/recommend');
				xhr.send();
				xhr.addEventListener("readystatechange",function(){
					if(xhr.readyState ==4 && xhr.status==200){
						obj = JSON.parse(xhr.response)
						oarr = obj.data.radioList;
						var station = document.querySelector(".station_box .station_ul");
						var template = "";
						for(var i=0;i<oarr.length;i++){
							template+=t(i)
						}
						function t(index){
							return `<li data-id="${oarr[index].radioid}">
									<a href="">
										<div class="list_img">
										
											<img src="${oarr[index].picUrl}" />
											<i class="iconfont icon-play2"></i>
										</div>
										<div class="list_con">
											<p>${oarr[index].Ftitle}</p>
										</div>
									</a>
								</li>`
						}
						station.innerHTML+=template
						var song = document.querySelector(".Popular_song .Popular_song_ul")
						oarr1 = obj.data.songList;
						console.log(oarr1)
						var template1 = "";
						for(var i=0;i<oarr1.length;i++){
							template1+=m(i)
						}
						function m(index){
							return `<li>
							<a href="https://y.qq.com/w/taoge.html?ADTAG=myqq&from=myqq&channel=10007100&id=${oarr1[index].id}">
								<div class="song_img">
									<img src="${oarr1[index].picUrl}" />
									<i class="iconfont icon-play2"></i>
									<span><i class="iconfont icon-erji"></i>${((oarr1[index].accessnum)/10000) .toFixed(1)}万</span>
								</div>
								<div class="song_con">
									<p class="song_title">
										${oarr1[index].songListDesc}
									</p>
									<p class="song_author">${oarr1[index].songListAuthor}</p>
								</div></a>
							</li>`
						}
						song.innerHTML+=template1
						var swiper = document.querySelector(".swiper-container .swiper-wrapper")
						oarr2 = obj.data.slider;
						var template2 = "";
						for(var i=0;i<oarr2.length;i++){
							template2+=b(i)
						}
						function b(index){
							return `<div class="swiper-slide"><a href="${oarr2[index].linkUrl}"><img src="${oarr2[index].picUrl}" /></a></div>`
						}
						swiper.innerHTML+=template2
					}
				})
	
}
recommend();




function ranking(){
	var xhr1 = new XMLHttpRequest;
	xhr1.open("GET",domain+'/ranking')
	xhr1.send();
	xhr1.addEventListener("readystatechange",function(){
		if(xhr1.readyState ==4 && xhr1.status==200){
			obj = JSON.parse(xhr1.response);
			oarr3 = obj.data.topList;
			var arr = [];
			console.log(oarr3)
			var ranking = document.querySelector(".ranking_box .ranking_list");
			var template3 = "";
			for(var i=0;i<oarr3.length;i++){
					template3+=t(i)
							
						}
			function topic(list){
				var tmp = "";
				list.forEach(function(el,index){
					tmp += `<p>${index+1}<span>${list[index].singername}</span> -${list[index].songname}</p>
										`
					
				})
				return tmp;
				
			}
			function t(index){
							return `<li>
							<a href="https://y.qq.com/w/toplist.html?ADTAG=myqq&from=myqq&channel=10007100&id=${oarr3[index].id}&type=top">
							<div class="ranking_main">
								<div class="main_img">
									<img src="${oarr3[index].picUrl}" />
									<span>
										<i class="iconfont icon-erji"></i>
										${((oarr3[index].listenCount)/10000) .toFixed(1)}万
									</span>
								</div>
								<div class="main_con">
									<h3>${oarr3[index].topTitle}</h3>
									${topic(oarr3[index].songList)}
								</div>
							<div class="arrow">
								>
							</div>
							</div></a>
						</li>`
						}
						ranking.innerHTML+=template3
		}
	})
	
}
ranking()


function seek(){
	var xhr2 = new XMLHttpRequest;
	xhr2.open("GET",domain+'/search');
	xhr2.send();
	xhr2.addEventListener("readystatechange",function(){
		if(xhr2.readyState ==4 && xhr2.status==200){
		obj = JSON.parse(xhr2.response);
		var oarr5 = obj.data.hotkey;
		var template5 = "";
				var arr = []
				for(var i = 0;i<6;i++){
					var radom = Math.floor(Math.random()*(oarr5.length))
					arr.push(radom)
					var arr2 = arr.filter(function(el,index){
						return index == arr.indexOf(el)
					})
					if(arr2.length == 6){
						break
					}
					template5+=t(i)
				}
				console.log(arr2)
//		for(var i=0;i<oarr5.length;i++){
//					
//			}
		var seek = document.querySelector(".tags .result_tags")
		function t(index){
				return `<span class="tags_list">
					<a href="">${oarr5[arr2[index]].k}</a>
				</span>`
				
						}
						seek.innerHTML+=template5
					}
	})
}
seek()
